<template>
  <div>
    <tabs :tabs="tabs" />
    <page-header content="拼团详情" />
    <div class="section">
      <el-row type="flex" align="middle" class="section-header" justify="space-between">
        <el-row type="flex" align="middle"><div class="section-title">拼团基本信息</div></el-row>
      </el-row>
      <el-row align="middle" :gutter="24" justify="space-between" class="tuan-info">
        <el-col :span="6">
          <el-row type="flex" class="tuan-info-item">
            <div class="title">发起拼团用户</div>
            <div>{{ tuanInfo.phone }}</div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" class="tuan-info-item">
            <div class="title">发起拼团时间</div>
            <div>{{ tuanInfo.create_time }}</div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" class="tuan-info-item">
            <div class="title">成团所需人数</div>
            <div>{{ tuanInfo.total_num }}</div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" class="tuan-info-item">
            <div class="title">已入团人数</div>
            <div>{{ tuanInfo.join_num }}</div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" class="tuan-info-item">
            <div class="title">还须参团人数</div>
            <div>{{ tuanInfo.remain_nums }}</div>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" class="tuan-info-item">
            <div class="title">拼团过期时间截止</div>
            <div>{{ tuanInfo.expiry_time }}</div>
          </el-row>
        </el-col>
      </el-row>
      <el-tabs v-model="activeTab" class="tuan-tabs" @tab-click="handleClick">
        <el-tab-pane label="参团成功" name="success"><tuan-datas :datas="tuanDatas" /></el-tab-pane>
        <el-tab-pane label="参团订单待支付" name="waiting" lazy><tuan-datas :datas="tuanDatas" /></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Tabs from '../../tabs';
import PageHeader from '@/components/page-header';
import TuanDatas from './components/tuan_datas.vue';
export default {
  components: {
    Tabs,
    PageHeader,
    TuanDatas
  },
  data() {
    return {
      tabs: [
        {
          title: '活动报表-详情',
          uri: '/promotion/tuan/' + this.$route.params.id + '/report/' + this.$route.params.tuanId + '/info',
          meta: {
            permission: 'exam.paper.list'
          }
        }
      ],
      tuanInfo: {},
      activeTab: 'success',
      loading: true,
      tuanDatas: []
    };
  },
  computed: {
    tuanId() {
      return this.$route.params.tuanId;
    }
  },
  created() {
    this.loadInfo();
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    loadInfo() {
      this.loading = true;
      this.$http.get(
        '/admin/promotion/tuan/' + this.$route.params.id + '/report/' + this.tuanId + '/tuan',
        {},
        ({ data }) => {
          this.loading = false;
          this.tuanInfo = data.tuan_info;
          this.tuanDatas = data.tuan_datas;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    loadTuanDatas(type) {
      this.loading = true;
      this.$http.get(
        '/admin/promotion/tuan/' + this.$route.params.id + '/report/' + this.tuanId + '/tuan',
        { type },
        ({ data }) => {
          this.loading = false;
          this.tuanDatas = data.tuan_datas;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    handleClick(tab) {
      this.tuanDatas = [];
      const type = tab.name === 'success' ? 1 : 0;
      this.loadTuanDatas(type);
    }
  }
};
</script>

<style scoped lang="scss">
.section {
  padding: 10px 0 15px 20px;
  .section-header {
    .section-title {
      font-weight: 600;
      margin-right: 6px;
    }
  }
  .tuan-info {
    margin-top: 16px;
    font-size: 14px;
    .tuan-info-item {
      margin-bottom: 15px;
      white-space: nowrap;
      color: #606266;
      .title {
        width: 118px;
        margin-right: 16px;
      }
    }
  }
  .tuan-tabs {
    margin-top: 10px;
  }
}
</style>
